<template>
  <div
    class="entry-container"
    :style="{
      paddingLeft: p + 'vw',
      paddingRight: p + 'vw',
    }"
  >
    <div class="entry-title">热门服务快捷入口</div>
    <div class="icon-container">
      <EntryIcon
        class="icon"
        :img="item.img"
        :text="item.title"
        v-for="(item, i) in info"
        :key="i"
        :active="i === 0"
      />
    </div>

    <div class="detail-container">
      <div class="detail-section" v-for="(item, i) in detailData" :key="i">
        <div class="title">{{ item.title }}</div>
        <div class="subtitles">
          <EntryDetail
            v-for="(subItem, i) in item.subTitles"
            :key="i"
            :text="subItem.title"
            :link="subItem.link"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EntryIcon from "./EntryIcon.vue";
import EntryDetail from "./EntryDetail.vue";
import ShangYun from "@/assets/data/exports/上云@1x.png";
import JieXi from "@/assets/data/exports/解析@1x.png";
import YingJian from "@/assets/data/exports/硬件@1x.png";
import GongXu from "@/assets/data/exports/供需@1x.png";
import JinRong from "@/assets/data/exports/金融@1x.png";
import ChanYe from "@/assets/data/exports/产业@1x.png";
export default {
  props: {
    p: {
      default: 6,
    },
  },
  components: {
    EntryIcon,
    EntryDetail,
  },
  data() {
    return {
      info: [
        {
          title: "企业上云",
          img: ShangYun,
        },
        {
          title: "标识解析",
          img: JieXi,
        },
        {
          title: "智能硬件",
          img: YingJian,
        },
        {
          title: "供需对接",
          img: GongXu,
        },
        {
          title: "金融服务",
          img: JinRong,
        },
        {
          title: "产业生态",
          img: ChanYe,
        },
      ],
      detailData: [
        {
          title: "上云政策",
          subTitles: [
            {
              title: "政策发布",
              link: "",
            },
            {
              title: "政策解读",
              link: "",
            },
            {
              title: "项目申报",
              link: "",
            },
          ],
        },
        {
          title: "上云产品",
          link: "",
          subTitles: [
            {
              title: "PDM产品管理系统",
              link: "https://pdm.csin.net.cn/#/login",
            },
            {
              title: "智慧消防Saas管理平台",
              link: "",
            },
            {
              title: "储能电站智慧消防管理平台",
              link: "",
            },
            {
              title: "消防钢瓶智能制造MES系统",
              link: "",
            },
            {
              title: "环球中心智慧消防管理平台",
              link: "",
            },
            {
              title: "低压二氧化碳监控系统",
              link: "",
            },
            {
              title: "莫高窟消防安全信息监控管理平台",
              link: "",
            },
            {
              title: "地铁方舱监控系统",
              link: "",
            },
            {
              title: "中安二级节点解析平台",
              link: "",
            },
          ],
        },
        {
          title: "服务提供商",
          subTitles: [
            {
              title: "威特龙消防安全集团股份公司",
              link: "",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.entry-container {
  margin-bottom: 40px;
  .entry-title {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
  }
  .icon-container {
    border-bottom: 1px solid #f0efef;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    cursor: pointer;
  }
  .detail-container {
    .detail-section {
      margin-bottom: 30px;
      .title {
        font-weight: bold;
        padding-left: 10px;
        border-left: 5px solid #285fce;
        margin-bottom: 20px;
      }
      .subtitles {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
      }
    }
  }
}
</style>
